<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
			
			</view>
		<view class="model">
			<view class="onlyOne">
				<view class="person">
					<image :src="url()+'/wximg/search.png'"></image>
				</view>
				<view class="modelrt">
					<view class="input-box">
						<view class="clear" @click="deleteInp">
							<image :src="url()+'/wximg/delete1.png'"></image>
						 </view>
						 <input class="serchPs" v-model="shopName" placeholder="请输入商户名称" type="search">
					</view>
				</view>
			</view>
			<text class="modeline"></text>
			<view>
				<button class="pesBtn" hover-class='pesBtn-hover' @click="init"  type="primary" style="padding: 0 30upx;">搜索</button>
			</view>
		</view>
			<view  v-if="contents2.length!=0"   class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  class="tableBox">
					<view class="tabletitle">商户列表</view>
					<view class="table">
						<view class="bgName"> 
							<!-- <text>包裹{{i+1}}</text>
							<text>包裹编码：<text>{{item.packageCode}}</text></text> -->
						</view>	
						<wyb-table 
						:key="key"
						show-vert-border="false" 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						height='322px'
						content-ft-color="#333333"  
						header-weight="true" 
						border-color="#ffffff"
						ref="table" 
						:headers="headers" 
						:contents="contents2" 
						width="100%"
						:show-vert-border="vertborder"
						:loading="loading"
						:url-col="urlCol"
						@onCheck="onCheck"
						@onCellClick="onCellClick"
						@onButtonClick="onButtonClick"
						  />			
					</view>
					
				</view>	
			</view>
			<view   v-if="contents2.length==0"  class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  class="tableBox">
					<view class="tabletitle">暂无数据</view>
				</view>	
			</view>

		</view>
	</view>
</template>
<script>
	// 表格
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import {SelectDeliveryTaskDetailList} from '@/api/request.js';
	import url from '@/api/url.js';
	export default {
		components: {
			// 表格
			wybTable
		},
		data() {

			return {
				url:url,
				//获取高度
				heightContent:'',
				// 配送车牌号码
				name: '吉A581k2',
				// 包裹编号
				packageCode: '2020041532568',
				//表格
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				shopName:"",
				vertborder:false, //金融竖向条,但是不能去除头部
				taskId:"",
				// 表格数据
				headers: [{
					label: '商户名称',
					key: 'shopName',
					width:210
				}, {
					label: '配送状态',
					key: 'deliveryStatustext',
					width:150
				}, {
					label: '调配状态',
					key: 'exchangeStatustext',
					width:150
				}, {
					label: '包裹数',
					key: 'packageCount',
					width:130
				}],
				contents: [],
				urlCol: [{
					type: 'route',
					key: '1'
				}, {
					type: 'http',
					key: 'url'
				},
				{
					type: 'button',
					key: 'look'
				}]
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data));
			this.taskId=data.lineData.id
			this.init(); 
			//表格加载动画
			
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
	　　        }).exec()
				}
			});		
		},
		methods: {
			backlast(){
				uni.navigateBack({
					delta: 1
				});
			},
			//表格
			onCellClick(e) {

				uni.navigateTo({
					url:'/pages/management/managementSh?data='+encodeURIComponent(JSON.stringify(e)),
				})
			},
			onCheck(e) {
			},
			// 取消授权
			onButtonClick(e) {
			},
			
			init(){//配送人员查询
			
				let  param={
					taskId:this.taskId
				};
				if(this.shopName!=""){
					param.shopName=this.shopName;
				}

				let thsi=this;
				SelectDeliveryTaskDetailList(param).then(res => {
						thsi.contents=[];
					if (res.code == 200) {
					
						res.map.data.forEach(function (item){
									item.listState=true;
									item.listColor=[]
								if(item.deliveryStatus==1){
									item.listColor.push({"element":1,"color":"#f79c3d"})
									item.deliveryStatustext="配送中"
								}else if(item.deliveryStatus==2){
									item.deliveryStatustext="已验签"
								/* 	item.listColor.push({"element":1,"color":"#000000"}) */
								}else if(item.deliveryStatus==0){
									item.deliveryStatustext="已装车"
									item.listColor.push({"element":1,"color":"#006742"})
								}else if(item.deliveryStatus==5){
									item.deliveryStatustext="已送达"
									item.listColor.push({"element":1,"color":"#0000ff"})
								}else if(item.deliveryStatus==4){
									item.deliveryStatustext="未送达"
									item.listColor.push({"element":1,"color":"#ff0000"})
								}else{
									item.deliveryStatustext="已分拣"
								}
								
								//配送状态 0已装车  1配送中  2已验签  3已分拣  4未送达  5已送达
								if(item.exchangeStatus==0){
									item.exchangeStatustext="否"
									item.listColor.push({"element":2,"color":"#00aa00"})
								}else if(item.exchangeStatus==1){
									item.exchangeStatustext="发送调配"
									item.listColor.push({"element":2,"color":"#f79c3d"})
								}else{
									item.exchangeStatustext="接收调配"
								/* 	item.listColor.push({"element":2,"color":"#00ffff"}) */
								}
							thsi.contents.push(item);
						});
					
						/* thsi.contents=res.map.data; */
						/* this.wait(1000).then(() => { */
							this.headers2 = this.headers.slice()
							this.contents2 = this.contents.slice()
							this.loading = false
						/* }) */
						
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {

					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			deleteInp(){
				this.shopName="";
			}
		}

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
		margin-top: 44upx;
	}

	/*配送车牌号*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
		/* 下方的灰色分割线 */
		border-bottom: solid 14upx #eee;
		padding-bottom: 40upx;
		margin-bottom: 40upx;
	}
    /*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	/* 确认配送结果 btn */
	.Confirm-delivery {
		background-color: #ffc562;
	}

	.Confirm-delivery-hover {
		background-color: #db760d;
	}

	.Confirm-delivery,
	.Confirm-delivery-hover {
		border-radius: 200upx;
		margin: 80upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
	}

	.Confirm-delivery:after {
		border: none;
	}
	/* 是否确认取消弹窗 */
	.popup-info {
		position: fixed;
		min-width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius:27upx;
		background-color: #fff;
		z-index: 9999;
	}
	 .popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.close {
		position: absolute;
		top:-75upx;
		left:10upx;
	}
	.close image {
		width:37upx;
		height:37upx;
	}
	.imgWra {
		width: 80%; 
		margin:80upx auto;
	}
	
	.up-check {
		width:500upx ;
		height: 500upx;
	}
	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex:1;
		flex-direction:row;
	}
	.btn {
		width: 90%;
		background-color: #ffc562;
		border-radius: 200upx;
		margin:40upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
	}
	.btn::after{
		border: none;
	}
	
	/*搜索*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}
	.text-temp {
		line-height: 50upx;
	     font-size: 32upx;
	}
	.pesBtn {
		border-radius: 200upx;
		background-color: #ffc562;
		font-size:28upx;
		color: #fff;
	}
	.pesBtn::after{
		border: none;
	}
	.model {
		width:81%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 5%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;		 
	}
	
	.onlyOne {
		width:70%;
		display: flex;
		align-items: center;
	}
	
	.modeline {
		width: 1px;
		height:70upx;
		background-color: #eeeeee;
	}
	
	.modelLf,.person  {
		width:40upx;
		height:40upx;
		border-radius: 50%;
		margin-right: 20upx;
		border: solid 1px #007457;
		position: relative;
	}
	
	.modelLf image {
		width: 70%;
		height: 70%;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -35%;
		margin-left: -35%;
	}
	 .person image {
		width:90%;
		height:85%;
		display: block;
		position: absolute;
		bottom:0%;
		left: 50%;
		margin-left: -45%;
	}
	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 28rpx;
		text-align:left; 
	}
	.serchPs {
		padding-left: 2%;
		height: 35px;
		line-height: 35px;
		color:#333;
		width: 80%;
	}
	.input-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: solid 1px #eee;
	}
	 .clear{
	   display: block;
	   position: absolute;
	   top: 10px;
	   right: 10px;
	   float: right;
		width: 10px;
		height: 10px;
	 }
	 .clear image{
		 width: 100%;
		 height: 100%;
	 }
</style>
